<template>
  <div id="homepage">
    <!-- 导航栏 -->
    <el-header class="navbar">
      <!-- 左侧 Logo 和标题 -->
      <div class="logo">
        <img src="@/assets/logo.png" alt="Bank Logo" />
        <span>银行系统</span>
      </div>

      <!-- 中部菜单居中 -->
      <div class="menu-center">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click="$router.push('/homepage')">首页</el-menu-item>
          <el-menu-item index="2" @click="$router.push('/service')">服务</el-menu-item>
          <el-menu-item index="3" @click="$router.push('/records')">交易记录</el-menu-item>
          <el-menu-item index="4" @click="print1">关于我们</el-menu-item>
          <el-menu-item index="5" @click="print1">联系我们</el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧登录按钮 -->
      <div v-if="loginstatus">
        <el-dropdown>
          <span class="el-dropdown-link">
            未登录<i class="el-icon-user-solid"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-link href="http://localhost:8081/login" target="_blank">登录</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link href="http://localhost:8081/login" target="_blank">注册</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div v-else>
       
        <el-dropdown>
          <span class="el-dropdown-link">
            个人信息<i class="el-icon-user-solid"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-link @click="$router.push('/user')" target="_blank">个人信息</el-link>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-link @click="loginOut">注销</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
          
            
             
         
        
      </div>

    </el-header>

    <!-- 这里将显示当前路由对应的组件 -->
    <el-main><router-view /></el-main>

    <!-- 页脚 -->
    <el-footer class="footer">
      <p>&copy; 2024 银行系统. 版权所有</p>
    </el-footer>
  </div>
</template>

<script>
const token = localStorage.getItem('token');

export default {
  name: "HomePageView",
  data() {

    return {
      username: "",
      password: "",
      loginstatus: true

    };
  },
  created() {
        this.logincheck();
    },
  // beforeDestroy(){
  //   localStorage.removeItem('token');
  // },

  methods: {
    loginOut(){
      localStorage.removeItem('token');
      window.location.reload();  
    },
    logincheck() {
      console.log(token);
      if (token) {
        this.loginstatus = false
      }
    },
    print1() {
      alert('大数据222班丛勐，许旭峰');
    },
    print2() {
      alert('欢迎联系');
    }
  },
};
</script>

<style scoped>
/* 通用样式 */
#homepage {
  font-family: "Arial", sans-serif;
}

/* 导航栏整体样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  /* 左中右布局 */
  align-items: center;
  background-color: #c90000;
  height: 60px;
  padding: 0 50px;
}

/* 左侧的 logo 和标题 */
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 10px;
  /* 图标和文字的间距 */
}

.logo span {
  font-size: 18px;
  color: white;
}

/* 中部的菜单居中 */
.menu-center {
  flex-grow: 1;
  /* 占满中间可用空间 */
  display: flex;
  justify-content: center;
  /* 菜单居中 */
}

/* 菜单项样式 */
.el-menu-item {
  margin: 0 15px;
  /* 控制菜单项的间距 */
  color: white;
}

/* 右侧的登录按钮 */
/* .login-menu {
  margin-left: auto;
} */


/* 菜单居中 */
.el-menu-demo {
  display: flex;
  justify-content: center;
  /* 菜单项居中 */
  background-color: transparent;
  /* 保持背景透明 */
}

/* 菜单项样式 */
.el-menu-item {
  color: white;
  font-size: 16px;
  margin: 20 5px;
  /* 控制菜单项之间的间距 */
}


.el-menu-item {
  color: white;
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

.el-menu-item:hover {
  background-color: #a50000;
  /* 悬停时背景色稍微变深 */
}

/* 登录按钮的位置 */
.login-menu {
  position: absolute;
  right: 10px;
  top: 20px;
}

.login-menu .el-button {
  color: white;
  background-color: #c90000;
  /* 使登录按钮与导航栏一致 */
  border: none;
}


.el-main{
  height: auto;
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 新闻部分样式 */
.news-section {
  padding: 50px 20px;
  background-color: #f7f7f7;
  text-align: center;
}

.news-section h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

.el-card {
  text-align: center;
}

.el-card a {
  text-decoration: none;
  color: #c90000;
  font-weight: bold;
}

.el-card a:hover {
  color: #a50000;
}

/* 页脚样式 */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #c90000;
  color: white;
}


.el-dropdown-link {
  cursor: pointer;
  color: #3e4145;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
